<form id="smart-form-register" class="smart-form"
      [saUiValidate]="validationOptions"
      novalidate="novalidate" >
  <header>
    Registration form
  </header>

  <fieldset>
    <section>
      <label class="input"> <i class="icon-append fa fa-user"></i>
        <input type="text" name="username" placeholder="Username"/>
        <b class="tooltip tooltip-bottom-right">Needed to enter the website</b> </label>
    </section>


    <section>
      <label class="input"> <i class="icon-append fa fa-envelope-o"></i>
        <input type="email" name="email" placeholder="Email address"/>
        <b class="tooltip tooltip-bottom-right">Needed to verify your account</b> </label>
    </section>

    <section>
      <label class="input"> <i class="icon-append fa fa-lock"></i>
        <input type="password" name="password" placeholder="Password" id="password"/>
        <b class="tooltip tooltip-bottom-right">Don't forget your password</b> </label>
    </section>

    <section>
      <label class="input"> <i class="icon-append fa fa-lock"></i>
        <input type="password" name="passwordConfirm" placeholder="Confirm password"/>
        <b class="tooltip tooltip-bottom-right">Don't forget your password</b> </label>
    </section>
  </fieldset>

  <fieldset>
    <div class="row">
      <section class="col col-6">
        <label class="input">
          <input type="text" name="firstname" placeholder="First name"
          />
        </label>
      </section>
      <section class="col col-6">
        <label class="input">
          <input type="text" name="lastname" placeholder="Last name"
          />
        </label>
      </section>
    </div>

    <div class="row">
      <section class="col col-6">
        <label class="select">
          <select name="gender" >
            <option value="0" disabled>Gender</option>
            <option value="1">Male</option>
            <option value="2">Female</option>
            <option value="3">Prefer not to answer</option>
          </select> <i></i> </label>
      </section>
      <section class="col col-6">
        <label class="input"> <i class="icon-append fa fa-calendar"></i>
          <input type="text" name="request" placeholder="Request activation on"
                 saUiDatepicker date-format="dd/mm/yy" />
        </label>
      </section>
    </div>

    <section>
      <label class="checkbox">
        <input type="checkbox" name="subscription" id="subscription"/>
        <i></i>I want to receive news and special offers</label>
      <label class="checkbox">
        <input type="checkbox" name="terms" id="terms"/>
        <i></i>I agree with the Terms and Conditions</label>
    </section>
  </fieldset>
  <footer>
    <button type="submit" class="btn btn-primary">
      Validate Form
    </button>
  </footer>
</form>
